<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="UTF-8">
<title>TITLE_TEXT</title>

<style type="text/css">
body, div {
    margin: 0;
    padding: 0;
}
body {
    font-family: "Arial", Helvetica, sans-serif;
    background-color: #000000; 
    color:#ffffff; 
    overflow: hidden;
    width: 100%;
    height: 100%;
}
/* Bright links that only underline when tracked */
a:link      { color:#00ffff; text-decoration: none; }
a:visited   { color:#00ffff; text-decoration: none; }
a:hover     { color:#00ffff; text-decoration: underline; }
a:active    { color:#20ffff; text-decoration: none; }
#title {
    width:100%;
    color:#e0e0e0;
    font-size:50px;
    white-space:nowrap;
    text-align:center;
}
.index_entry {
    color:#00ffff;
    font-size:28px;
    white-space:nowrap;
}
.folder_entry {
    color:#00c0c0;
    font-size:32px;
    white-space:nowrap;
}
.folder_icon {
    display: inline-block;
    background: url() no-repeat;
    height:32px;
    width:32px;
}
.info_text {
  color: #808080;
  font-size: 10px;
}
.button_format {
    background: transparent;
    border: none !important;
    font-size:0;    
}
#PlayerBox {
    overflow: auto;
    text-align:center;
    position: absolute;
    width: 100%;
    height: 100pt;
    background-color:#101010;
    z-index:2;
}
#PlayList {
    overflow: auto;
    position: absolute;
    width: 100%;
    top: 100pt;
    bottom: 0;
    z-index:1;
}
</style>
</head>

<body onload="PlayerInit();">
<div id='PlayerBox'>
<div id="title">Titles Available In TITLE_TEXT</div>
<br/>
<button class="button_format" type="button" title="Previous Track" onclick="javascript: return playPrev();"><img src="" /></button>
&nbsp;
<audio id="audioplayer" controls >
    Get a <i>modern</i> browser that supports HTML5 Audio.  If you see this, it doesn't, or it is disabled.<br/><br/>
    <a href="https://www.google.com/intl/en/chrome/browser/">Chrome</a><br/>
    <a href="http://www.apple.com/safari/">Safari</a><br/>
    <a href="http://www.mozilla.org/en-US/firefox/new/">Firefox</a><br/>
    <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">IE, if your Windows version supports a new enough version.</a><br/>
    <a href="https://en.wikipedia.org/wiki/List_of_web_browsers">Others...</a><br/>
    <a href="http://www.w3schools.com/html/html5_audio.asp">More info about compatibility...</a><br/>
</audio>
&nbsp;
<button id="bSeq" class="button_format" type="button" title="Sequential" style='display:none;' onclick="javascript: return ClickedSequential();"><img src="" /></button>
<button id="bRand" class="button_format" type="button" title="Shuffle" onclick="javascript: return ClickedRandom();"><img src="" /></button>
<button class="button_format" type="button" title="Next Track" onclick="javascript: return playNext();"><img src="" /></button>
</div>

<br/>
<div id="PlayList">
<br/><a class="folder_entry" id="ToParent" style='display:none;' href="../Jukebox.html" ><img src="" /></a>

<!--INDEXES_HERE-->
<br/>
<div class="info_text"><a href="https://code.google.com/p/videowebscript/">Generated by JukeboxScript</a></div>
</div>

<script type="text/javascript">
var original_title = "Titles Available In TITLE_TEXT";   // Original title, before play list monkeyed with it
var bShuffle = false;
var now_playing = null;
var playlist = null;
var PlayList = document.getElementById("PlayList");;
var audio_box;
var audio;
var bRand = document.getElementById("bRand");
var bSeq = document.getElementById("bSeq");

function ClickedRandom()
{
    PlayListShuffle(); 
    PlayMedia();
    bRand.style.display ='none';
    bSeq.style.display ='';
    return false;
}
function ClickedSequential()
{
    MakePlaylist(); 
    PlayMedia();
    bSeq.style.display ='none';
    bRand.style.display ='';
    return false;
}

function PlayerInit()
{
    audio_box = document.getElementById("PlayerBox");
    audio = document.getElementById("audioplayer");

    MakePlaylist();
    if( 0 == playlist.length )
    {
        audio_box.style.display = 'none';
        PlayList.style.top = '0px';
    }

    var params = window.location.href.split('?');
    if( 2 == params.length )
    {   // If we have '?title.mp3' that's the video in this folder, to play
        PlayMedia(decodeURI(params[1]));
    }
    
    // If we have a parent, show a 'back' link to it
    // Note: This will only work with pages served from a web server.
    // If you open it from the file system, it will remain hidden, and get an 
    // error in the page's log output about needing to be 'same domain'.
    var request = new XMLHttpRequest();  
    request.open('GET', '../Jukebox.html', true);
    request.onreadystatechange = function()
    {
        if (request.readyState === 4)
        {
            if (request.status === 200) 
            {   // If a parent html page exists, display a link to it
                document.getElementById("ToParent").style.display = '';
            }  
        }
    };
    try {
        request.send();
    } 
    catch(e) {};
    
    
}
/* 
 * Load the audio when the page finishes loading 
 * http://www.w3.org/2010/05/audio/mediaevents.html
 */
function PlayMedia(audio_path)
{
    if(typeof(audio_path)==='undefined') 
        audio_path = playlist[0].getAttribute('path');
    now_playing = audio_path;
    if( 'undefined' == typeof(now_playing) )
    {
        title.innerHTML = original_title;
        return;
    }
    audio.setAttribute("src", now_playing);
    audio.load();
    audio.play();
    audio.addEventListener( "ended", playNextWrap ); // Re-shuffle
    // Show title
    var title = document.getElementById("title");
    title.innerHTML = "Now Playing: " + TitleFromPath(now_playing);
}

/* Make a play list from title links */
function MakePlaylist()
{
    var collection = document.getElementsByClassName("index_entry");
    var array = new Array();
    var i;
    for( i = 0; i < collection.length; ++i )
    {
        array.push(collection[i]);
    }
    bShuffle = false; 
    return playlist = array;
}
/* Shuffle a play list */
function PlayListShuffle()
{
    ArrayShuffle(playlist);
    ArrayShuffle(playlist);
    ArrayShuffle(playlist);
    bShuffle = true; 
    return playlist;
}
/**
 * Shuffle an array
 * @param array Array to shuffle in-place
 * @return Array passed in
**/
function ArrayShuffle(array)
{
    var ri;
    var tmp;
    var i = array.length;
    while( i-- )
    {
        ri = Math.floor(Math.random() * array.length);
        tmp = array[i];
        array[i] = array[ri];
        array[ri] = tmp;
    }
    return array;
}
/* Get index of currently playing media */
function indexPlaying()
{
    var i = playlist.length;
    while( 0 <= --i )
    {
        if( playlist[i].getAttribute('path') == now_playing )
            return i;
    }
    return -1;
}
/* Play the previous one */
function playPrev()
{
    var i = indexPlaying() - 1;
    if( i < 0 )
    {
        i = playlist.length-1;
    }
    PlayMedia(playlist[i].getAttribute('path'));
    return false;
}
/* Play the next one */
function playNext()
{
    var i = indexPlaying() + 1;
    if( i >= playlist.length )
    {
        i = 0;
    }
    PlayMedia(playlist[i].getAttribute('path'));
    return false;
}
/* Play the next one, re-shuffle if play list hits the end on its own */
function playNextWrap()
{
    var i = indexPlaying() + 1;
    if( i >= playlist.length )
    {
        i = 0;
        if( bShuffle )
        {
            PlayListShuffle();
        }
    }
    PlayMedia(playlist[i].getAttribute('path'));
}
/** Turn video URI into title text */
function TitleFromPath(path)
{
    var titletext = decodeURI(path);
    titletext = titletext.substring(titletext.lastIndexOf('/')+1);
    titletext = titletext.substring(0,titletext.lastIndexOf('.'));
    return titletext;
}
</script>

</body>
</html>
